<template>
	<view class="page-status" v-if="status !== PageStatusEnum['NORMAL']">
		<!-- Loading -->
		<template v-if="status === PageStatusEnum['LOADING']">
			<slot name="loading">
				<u-loading :size="60" mode="flower" />
			</slot>
		</template>
		<!-- Error -->
		<template v-if="status === PageStatusEnum['ERROR']">
			<slot name="error"></slot>
		</template>
		<!-- Empty -->
		<template v-if="status === PageStatusEnum['EMPTY']">
			<slot name="empty"></slot>
		</template>
	</view>
</template>


<script>
import { PageStatusEnum } from '@/utils/enum'

export default {
	name: 'PageStatus',

	props: {
		status: {
			type: String,
			default: PageStatusEnum['LOADING']
		},
	},

	data() {
		return {

		}
	},

	computed: {
		PageStatusEnum: () => PageStatusEnum,
	}
}
</script>


<style>
.page-status {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #FFFFFF;
}
</style>
